<template>
	<LayoutBody :class="{'ui-layout-submenu-open': activeMenuName}">
        <div v-if="activeMenuName" class="ui-layout-submenu">
        	<ul class="ui-submenu">
        		<li class="ui-submenu-item" @click="handleBackMarket" >
					<div>返回应用</div>
				</li>
				<li
					class="ui-submenu-item"
					v-for="(item, index) in currentMenuList"
					v-if="!item.meta.active"
					:class="{'ui-submenu-item-active': item.name == activeMenuName, 'ui-submenu-item-disabled': (item.meta && item.meta.disabled)}"
					@click="handleRoute(item.name)"
				>
					<div>{{ item.meta.title }}</div>
				</li>
        	</ul>
		</div>
		<LayoutContent>
			<router-view></router-view>
		</LayoutContent>
	</LayoutBody>
</template>

<script>
import LayoutBody from '@/components/layout/body.vue';
import LayoutContent from '@/components/layout/content.vue';
export default {
	name: 'market-main',
	components: {
		LayoutBody,
		LayoutContent
	},
	data() {
		return {
			activeMenuName: '',
			currentMenuList: []
		}
	},
	computed: {
        marketMenuList () {
            return this.$store.state.app.marketMenuList;
        }
    },
    watch: {
    	'$route'(route) {
    		this.handleGetMenuList(route);
    	}
    },
    mounted() {
    	this.handleGetMenuList(this.$route);
    },
    methods: {
    	handleGetMenuList(route) {
    		// 获取当前子节点name
    		if(route.matched.length > 1) {
    			let prevName = route.matched[1].name;
    			let activeRoute = route.matched[route.matched.length - 1];
    			if(activeRoute.meta && activeRoute.meta.active) {
    				this.activeMenuName = activeRoute.meta.active;
    			}else{
    				this.activeMenuName = activeRoute.name;
    			}
    			// 获取子菜单
    			this.marketMenuList.forEach(item => {
    				if(item.name == prevName) {
    					this.currentMenuList = item.children;
    				}
    			})
    		}else{
    			this.activeMenuName = '';
    			this.currentMenuList = [];
    		}
    	},
    	// 返回应用市场
    	handleBackMarket() {
    		this.$router.push({name: 'app_market_index'});
    	},
    	handleRoute(name) {
    		this.$router.push({name: name});
    	}
    }
}
</script>